<template>
    <div class="tianjiashangpin">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <h3 class="add">请输入您要添加商品的店铺：</h3>
            <el-form-item label="商铺ID" prop="name">
              <el-input v-model="ruleForm.name" style="width:400px" @keyup.enter.native="chaxun"></el-input>
            </el-form-item>
            <div :class="{hid:less1}">
            <el-form-item label="商品ID" prop="region">
              <el-input v-model="ruleForm.region" style="width:400px" @keyup.native="tjid"></el-input>
              <span class="erro erro1" v-if="errbl">{{erro1}}</span>
              <span class="erro erro1 blu" v-else>{{erro1}}</span>
            </el-form-item>
            <h2 class="tishih">添加主页导航tag辅助主页分类搜索</h2>
            <el-form-item label="导航Tag" prop="type1">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox :label="item" name="type" v-for="(item,key) in arr" :key="key"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <h2 class="tishih">添加描述性标签以供搜索</h2>
            <el-form-item label="描述分类" prop="type3">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags3"
                closable
                :disable-transitions="false"
                @close="handleClose3(tag)"
              >{{tag}}</el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible3"
                v-model="inputValue3"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm3"
                @blur="handleInputConfirm3"
              ></el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput3">+ New Tag</el-button>
            </el-form-item>
            <div class="kexuanbiaoqian">
                <h2 class="tishih">添加可选标签，例:尺码(规格)</h2>
                <el-form-item label="可选分类1" prop="type">
                    <el-tag
                        :key="tag"
                        v-for="tag in dynamicTags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose1(tag)"
                    >{{tag}}</el-tag>
                    <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                    ></el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                </el-form-item>

                <div class="bixuan">
                        <h2 class="tishih">添加必选标签并上传对应图片以及数量</h2>
                    <el-form-item label="必选分类" prop="type2">
                        <!-- <el-tag
                            :key="tag"
                            v-for="tag in dynamicTags2"
                            closable
                            :disable-transitions="false"
                             v-if="addtag"
                        >{{tag}}</el-tag> -->
                        <el-tag
                            :key="tag"
                            v-for="tag in dynamicTags2"
                            closable
                            :disable-transitions="false"
                            @close="handleClose2(tag)"
                        >{{tag}}</el-tag>
                        <el-input
                            class="input-new-tag"
                            v-if="inputVisible2"
                            v-model="inputValue2"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm2"
                            @blur="handleInputConfirm2"
                        ></el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput2">+ New Tag</el-button>
                        <button class="btn" type="button" @click="btns">确定必选分类</button><span class="jingao" v-if="addtag">(已确定)</span><span class="jingao" v-else>(确定后将不可修改！)</span>
                    </el-form-item>
                    <div :class="{hid:!addtag}">
                   <h2 class="tishih">请依次上传必选标签对应图片</h2>
                   <!-- :auto-upload="false" -->
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="/api/spin"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        :file-list="fileList"
                        
                        list-type="picture" >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
                        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                    <div class="shuliang">
                        <span v-for="(item,key) in dynamicTags2" :key="key">{{item}}:
                            <el-input class="sls" placeholder="请输入单价" @blur="tjjiage($event.target.value,key)"></el-input>
                            &nbsp;元，&nbsp;
                            <el-input
                                placeholder="请输入数量"
                                 class="sls" @blur="tjnum($event.target.value,key)">
                            </el-input> 件</span>
                            <!-- clearable可清除 -->
                    </div>
                    </div>
                </div>
            </div>
            
            <el-form-item label="商品信息" prop="desc" class="abc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
            </div>
          </el-form>
        </div>
</template>
<script>
  export default {
    data() {
      return {
          addtag:false,
          danjia:[],
          num:[],
          img:[],
          arr:null,
          errbl:false,
          erro1:"",
          less1:true,
          input10:"",
         fileList: [],
         fileList1:[],
        dynamicTags: [],
        inputVisible: false,
        inputValue: "",
        dynamicTags2: [],
        inputVisible2: false,
        inputValue2: "",
        dynamicTags3: [],
        inputVisible3: false,
        inputValue3: "",
        ruleForm: {
          name: '',
          region: '',
          type: [],
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请输入商品ID', trigger: 'blur' }
          ],
          type: [
                { required: true, message: "添加可选标签，例：尺码(规格)", trigger: "change" }
           ],
          type2: [
                { required: true, message: "添加必选标签并上传对应图片，例：颜色", trigger: "change" }
           ],
           type3: [
                { required: true, message: "添加描述性标签，可供搜索", trigger: "change" }
           ],
           type1: [
            { type: 'array', required: true, message: '请至少选择一个标签，可在店铺主页导航分类以供搜索', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填商品详细信息', trigger: 'blur' }
          ]
        }
      };
    },
    created(){
        console.log(this.num.length)
    },
    methods: {
        btns(){
            if(this.dynamicTags2.length!=0){
                this.addtag=true
            }
            
        },
        tjjiage(val,key){
             if(this.danjia[key]){
               this.danjia.splice(key,1,val)
               console.log(this.danjia)
            }else{
                if(this.danjia[key]==""){
                   this.danjia.splice(key,1,val)
                    console.log(1)
                }else{
                    console.log(2)
                    this.danjia.push(val)
                }
               console.log(this.danjia)
            }
        },
        tjnum(val,key){
            console.log(key)
            if(this.num[key]){
               this.num.splice(key,1,val)
               console.log(this.num)
            }else{
                if(this.num[key]==""){
                   this.num.splice(key,1,val)
                    console.log(1)
                }else{
                    console.log(2)
                    this.num.push(val)
                }
               console.log(this.num)
            }
        },
        handleSuccess(response,file,fileList){
        console.log(response)
        this.img.push(response)
        console.log(this.img)
      },
      handleSuccess1(response,file,fileList){
        console.log(response)
        this.zsimg.push(response)
        console.log(this.zsimg)
      },
        tjid(){
            if(this.ruleForm.region.length>=5 && this.ruleForm.region.length<=8){
                axios.post("/api/spinid",{spinid:this.ruleForm.region}).then((data)=>{
                    if(data.data.num){
                        this.errbl=false
                        this.erro1="可用"
                    }else{
                        this.errbl=true
                        this.erro1="id已被注册"
                    }
                })
            }else{
                this.erro1=""
            }
        },
        chaxun(){
            console.log(123)
            if(this.ruleForm.name.length==0){
               this.$toast({
                message:"请输入您添加商品的店铺ID!",
                duration:1500
              })
              return false
            }
            axios.post("/api/dpids",{dpid:this.ruleForm.name}).then((data)=>{
                console.log(data.data)
                if(data.data){
                   this.$toast({
                        message:"匹配成功，请继续添加",
                        duration:1500
                    })
                    this.less1=false
                   this.arr=data.data[0].navname.split(',')

                }else{
                     this.$toast({
                        message:"匹配失败，请重新输入ID",
                        duration:1500
                    })
                }
            })
        },
        submitForm(formName) {
             var _this=this
           if(this.img.length==0 || this.dynamicTags3.length==0 || this.dynamicTags2.length==0 || this.num.length!=this.dynamicTags2.length){
              console.log('请完善数据!')
              this.$toast({
                message:"请完善数据",
                duration:1500
              })
              return false
            }
          var ab = function (params) {
              let flag = true;
              for(var key in params){
                if(params[key] != '0' && !params[key]){
                  console.log('请完善数据!');
                  _this.$toast({
                message:"请完善数据",
                duration:1500
              })
                  return false; // 终止程序
                }
              }
            
              return flag;
            }
            ab(this.ruleForm)
                var datas={
                    rul:this.ruleForm,
                    tagms:this.dynamicTags3,
                    tagbx:this.dynamicTags2,
                    tagkx:this.dynamicTags,
                    img:this.img,
                    num:this.num,
                    danjia:this.danjia

                }
            
            axios.post("/api/tjspin",{rul:this.ruleForm,
                    tagms:this.dynamicTags3,
                    tagbx:this.dynamicTags2,
                    tagkx:this.dynamicTags,
                    img:this.img,
                    num:this.num,
                    danjia:this.danjia}).then((data)=>{
                if(data.data.num){
                    console.log("chaxundao")
                    this.$toast({
                        message:"商品添加成功！",
                        duration:1500
                    })
                    this.$router.push("/houtai")
                    // window.location.href="http://localhost:8080/#/houtai/tjspin"
                }else{
                    console.log("meichaxundao")
                    this.$toast({
                        message:"商品添加失败，请重新添加！",
                        duration:1500
                    })
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
            this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";
        },
         handleInputConfirm2() {
        let inputValue2 = this.inputValue2;
        if (inputValue2) {
            this.dynamicTags2.push(inputValue2);
        }
        console.log(this.dynamicTags2)
        this.inputVisible2 = false;
        this.inputValue2 = "";
        },
         handleInputConfirm3() {
        let inputValue3 = this.inputValue3;
        if (inputValue3) {
            this.dynamicTags3.push(inputValue3);
        }
        this.inputVisible3 = false;
        this.inputValue3 = "";
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        showInput2() {
            if(this.addtag){
                return false
                console.log(1234)
            }else{
            this.inputVisible2 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
            }
        },
        showInput3() {
            this.inputVisible3 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleClose1(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        handleClose2(tag) {
            if(this.addtag){
                return false
            }
            var _this=this
            console.log(this.num)
            console.log(this.num.length)
             var i = this.dynamicTags2.length;
            function cs(arrays, obj) {
                while (i--) {
                    if (arrays[i] === obj) {
                        return i;
                    }
                }
                return false;
            }
            cs(this.dynamicTags2,tag)
            console.log(i)
            this.dynamicTags2.splice(this.dynamicTags2.indexOf(tag), 1);
            
            this.num.splice(i)
            this.danjia.splice(i)
            console.log(this.num)
            console.log(this.num.length)
// function contains(arrays, obj) {
//     var i = arrays.length;
//     while (i--) {
//         if (arrays[i] === obj) {
//             return i;
//         }
//     }
//     return false;
// }

        },
        handleClose3(tag) {
            this.dynamicTags3.splice(this.dynamicTags3.indexOf(tag), 1);
        },
        submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
    }
  }
</script>
<style>
    .tianjiashangpin{
        width: 900px;
    }
    .tishih{
        font-size: 16px;
        font-weight: 500;
        padding-left: 20px;
        color: #666;
        margin: 20px 0;

    }
    .abc{
        margin-top: 30px;
    }
    .shuliang span{
        display: block;
        margin: 10px 0;
        font-size: 14px;
    }
    .sls{
        display: inline-block;
        width: 200px;
    }
    .el-upload-list li{
        display: inline-block;
        margin-right: 5px;
    }
    .add{
        color: cornflowerblue;
        font-size: 16px;
        font-weight: 500;
    }
    .erro{
    font-size: 14px;
    color: red;
  }
  .blu{
    color: cornflowerblue;
  }
  .sls>span{
      top: -20px;
  }
  .btn{
      width: 100px;
      font-size: 13px;
      background: #409EFF;
      color: #fff;
      border: none;
      outline: none;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
  }
  .btn:hover{
      background:rgb(16, 135, 253)
  }
  .jingao{
      font-size: 6px;
      color: #F56C99;
  }
</style>
